<template>
  <div>
    <Header></Header>
    <div class="ListBox">
      <van-swipe-cell  v-for="(item, index) in list"
        :key="index">
        <!-- <van-card
        v-for="(item, index) in list"
        :key="index"
        :price="item.price"
        :title="item.name"
        thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #bottom>
          <van-stepper
            v-model="item.count"
            theme="round"
            button-size="22"
            disable-input
          />
        </template>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-card> -->
        <van-card
        
        :price="item.price"
        :title="item.name"
        thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
        >
          <template #bottom>
            <van-stepper
              v-model="item.count"
              theme="round"
              button-size="22"
              disable-input
            />
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="onClick(item.id)"/>
        </template>
      </van-swipe-cell>
      <div class="price">
        <h3>总价：{{ sum }}</h3>
      </div>
    </div>
  </div>
</template>
<script>


export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$axios.get("http://localhost:8080/listData.json").then((res) => {
      console.log(res);
      this.list = res.data;
    });
  },
  methods:{
    onClick(id){
      this.list.forEach((item,index)=>{
        if(item.id==id){
          this.list.splice(index,1)
        }
      })
    }
  },
  computed: {
    sum() {
      var sum = 0;
      this.list.forEach((item) => {
        sum += item.count * item.price;
      });
      return sum;
    },
  },
};
</script>
<style lang="scss">
.ListBox {
  width: 100%;
  // height: 80vh;
  margin-top: 10vh;
}
.price {
  width: 100%;
  height: 50px;
  line-height: 50px;
  position: fixed;
  bottom: 0vh;
  background-color: red;
}
</style>
